<template>
  <div class="color">
    <div class="content gwgk">
      <div class="right xwzx">
        <div class="inner">
          <div class="title">
            <p>践行社会主义核心价值观</p>
          </div>
          <div v-show="!btn_show" style="position:absolute;top:40%;left:50%;">
            <p>抱歉,您无权访问</p>
          </div>
          <div class="title_top">
            <p class="xwzx_title">{{message.name}}</p>
            <span></span>
            <span class="xwzx_second_title" v-show="btn_show">编辑： 发布时间{{message.metadata[1].value}}</span>
          </div>
          <div v-html="message.metadata[0].value"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { replaceImg, replaceA } from "../../api/replace";
import { Permission } from "../../api/login";
export default {
  data() {
    return {
      message: { metadata: [{ value: "" }, { value: "" }, { value: "" }] },
      index: 1,
      all: 10, //总页数
      cur: 1, //当前页码
      totalPage: 0, //当前条数
      btn_show: true,
    };
  },

  // created() {
  //   this.look(this.$router.history.current.query.id);
  // },
  mounted() {
    this.look(this.$router.history.current.query.id);
  },
  methods: {
    look(id) {
      let self = this;
      Permission(4, this).then((res) => {
        if (res) {
          self.$api
            .get(`${self.zs}/get/ziyuanku/data?paraId=48&itemId=${id}`)
            .then((res) => {
              self.message = res.data;
              let data = res.data;
              var pic = data.metadata[0].value.replace(/\\/g, ""); //全局去掉转义字符
              var newPic = replaceImg(pic);

              var a = replaceA(newPic);
              data.metadata[0].value = a;
              self.message = data;
            });
        } else {
          this.btn_show = false;
        }
      });
    },
  },
};
</script>
<style scoped>
.gwgk.content {
  display: flex;
  justify-content: space-between;

  max-width: 1200x;
  margin: auto;
  line-height: 40px;

  box-sizing: border-box;
  padding-bottom: 200px;
}
.gwgk .title {
  font-size: 24px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
}
.title > p {
  margin-bottom: 10px;
}
.gwgk li {
  list-style: none;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .right {
  width: 980px;
  padding: 0 30px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gwgk .blue {
  color: rgb(25, 67, 119);
}
.zs_k {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.zs_title {
  font-weight: bold;
}
.zs_content {
  font-size: 16px;
}
.right .inner .more {
  color: white;
  background: rgb(78, 105, 161);
  width: 200px;
  height: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
}
.right .inner {
  padding-top: 5px;
  padding-bottom: 20px;
}
.right .inner .main_content {
  display: flex;
  padding: 20px;
  justify-content: space-between;
}
.right .inner .second_content li {
  display: flex;
  padding: 20px;
  font-size: 24px;
  box-sizing: border-box;
  justify-content: space-between;
  border-top: 1px solid rgb(216, 216, 216);
  color: black;
}

.bread {
  max-width: 1150px;
  margin: auto;
  height: 60px;
}
/*馆务公开 新闻咨询 */
.gwgk span {
  display: block;
}
.title_top {
  text-align: center;
}
.xwzx_title {
  color: #060606;
  font-size: 24px;
  margin-top: 20px;
}
.xwzx_second_title {
  font-size: 16px;
  color: #3e3e3e;
  margin-bottom: 10px;
}
.ziti {
  font-size: 16px;
  color: #666666;
}
/* fenye */
.page-bar {
  margin: 16px auto;
  margin-top: 60px;
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar ul {
  width: 620px;
  height: 40px;

  display: flex;
  margin: auto;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid rgb(190, 190, 190);
  text-decoration: none;
  position: relative;
  padding: 4px 12px;

  margin-left: -1px;

  color: #5d6062;
  cursor: pointer;
  margin-right: 20px;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar a.banclick {
  cursor: not-allowed;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: rgb(78, 105, 161);
  border-color: rgb(78, 105, 161);
}
.page-bar i {
  font-style: normal;
  color: rgb(78, 105, 161);
  margin: 0px 4px;
  font-size: 12px;
}
</style>